<template>
  <el-dialog
    top="30px"
    width="90%"
    class="dialog-sm"
    custom-class="max-w"
    style="--max-width: 1200px"
    append-to-body
    title="已缴保费"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <div v-loading="loading">
      <detail-view :related-id="relatedId"></detail-view>
      <hr />

      <div class="row text-body mb-2">
        <div class="col">已核算保费金额：{{ accountingTotalFunds }}万元</div>
        <div class="col text-center">累计缴费金额：{{ receiveTotalFunds }}万元</div>
        <div class="col text-right">当前欠缴金额：{{ leftFunds }}万元</div>
      </div>

      <table class="table table-bordered table-sm text-center">
        <thead>
          <tr>
            <td>应缴期数</td>
            <td>登记人员</td>
            <td>登记时间</td>
            <td>登记金额(万元)</td>
            <td>到账时间</td>
            <td>到账金额(万元)</td>
            <td>附件</td>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in registers" :key="item.id">
            <td>{{ item.due_warrant_date || '-' }}</td>
            <td>{{ item.submit_person_name }}</td>
            <td>{{ item.actual_warrant_date || '-' }}</td>
            <td>{{ item.actual_warrant_fee || '-' }}</td>
            <td>{{ item.confirm_fee_time || '-' }}</td>
            <td>{{ item.confirm_warrant_fee || '-' }}</td>
            <td>
              <img-card :images="item.attachs" :size="40"></img-card>
            </td>
          </tr>

          <tr v-if="!loading && !registers.length">
            <td colspan="7" class="text-center p-3 text-muted">暂无缴费信息</td>
          </tr>

          <tr v-else class="bg-light font-weight-bold">
            <td colspan="5">缴费金额合计</td>
            <td>{{ receiveTotalFunds || '-' }}</td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
  </el-dialog>
</template>

<script>
import { strip, sub, arrayFromString } from '@vimi/utils-tool'
import { formatToDay } from '@/common/plugins/tools/date'
import { num } from '@/common/plugins/tools/format'

import DetailView from '@/bigcredit/views/settle/collect/components/DetailView.vue'
import ImgCard from '@/components/ImgCard.vue'

export default {
  components: {
    DetailView,
    ImgCard,
  },
  props: {
    visible: Boolean,
    editRow: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      loading: false,
      project: {},
      registers: [],
    }
  },
  computed: {
    relatedId() {
      return this.editRow.customer_related_id
    },
    // 累计核算
    accountingTotalFunds() {
      return num(this.editRow.check_warranty_fee)
    },
    // 累计缴费
    receiveTotalFunds() {
      // return num(this.editRow.payed_warranty_fee)
      const total = this.registers.reduce((p, c) => {
        p += num(c.confirm_warrant_fee)
        return p
      }, 0)
      return strip(total)
    },
    // 欠缴
    leftFunds() {
      return Math.max(sub(this.accountingTotalFunds, this.receiveTotalFunds), 0)
    },
  },
  watch: {
    visible: {
      handler: function (val) {
        val && this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      if (!this.relatedId) return

      this.loading = true
      this.getRegister().finally(() => {
        this.loading = false
      })
    },
    // 登记列表
    getRegister() {
      return this.$api
        .getData({
          table: 'credit_warrant_fee_register',
          params: {
            'customer_related_id.eq': this.relatedId,
            'pay_status.eq': 2,
          },
          order: {
            actual_warrant_date: 'asc',
          },
        })
        .then(res => {
          this.registers = (res.data || []).map(this.dataAdapter)
        })
    },
    dataAdapter(row) {
      row.due_warrant_date = formatToDay(row.due_warrant_date)
      row.actual_warrant_date = formatToDay(row.actual_warrant_date)
      row.confirm_fee_time = formatToDay(row.confirm_fee_time)
      row.attachs = arrayFromString(row.attachment)
      return row
    },
  },
}
</script>
<style lang="scss" scoped></style>
